<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <title>Audio Network - data transmission over sound waves - ultra simple</title>

    <meta name="description" content="">

    <link rel="stylesheet" type="text/css" href="../../asset/css/simple-bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../../asset/css/example.css">
    <link rel="stylesheet" type="text/css" href="amplitude-modulation-transmission-full.css">
    <script src="../../asset/js/site.js"></script>
    <meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body onLoad="">
    <div id="fb-root"></div>
    <script>
        if (isProduction()) { // TODO refactor this
            (function(d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0];
                if (d.getElementById(id)) return;
                js = d.createElement(s); js.id = id;
                js.src = "//connect.facebook.net/pl_PL/sdk.js#xfbml=1&version=v2.7&appId=726972757440597";
                fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));
        }
    </script>

    <div class="wrapper">

        <div class="container">
            <h1>Audio Network - send data over sound in JavaScript</h1>
            <div class="row margin-bottom">
                <div class="col col-xs-12">
                    <div class="fb-like-cont">
                        <a href="https://www.facebook.com/Data-transmission-over-sound-500422050157351/" target="_blank" class="a-icon a-icon-fb">
                            <img src="/asset/image/fb.png" alt="Audio Network at Facebook">
                        </a>
                        <div class="fb-like" data-href="https://www.facebook.com/Data-transmission-over-sound-500422050157351/" data-layout="button" data-action="like" data-size="small" data-show-faces="true" data-share="false"></div>
                    </div>
                    <p class="text-right">
                        Return to <a href="https://audio-network.rypula.pl">main page</a>
                    </p>
                    <p class="larger text-center margin-bottom-triple">
                        THIS PROJECT IS STILL UNDER DEVELOPMENT<br/>
                        Source code available at <a href="https://github.com/robertrypula/AudioNetwork" target="_blank">GitHub</a>
                    </p>
                    <p class="larger text-center margin-bottom-triple" style="outline: 1px dashed red;">
                        This example uses old classes for sample generation. They will be deprecated soon!
                    </p>
                    <p>
                        This example is developer's sandbox for carrier generate and recovery. I was testing here
                        ability to restore carrier's phase and power from raw data samples that contains couple of others
                        frequencies. This example will have more features and description in future releases.
                        <br/><br/>
                        Remember to init first!!
                    </p>
                </div>
            </div>

            <h2>Config</h2>
            <div class="row margin-bottom">
                <div class="col col-xs-12">

                    <div class="row margin-bottom">
                        <div class="col col-sm-3">
                            <b class="label">
                                Init
                            </b>
                        </div>
                        <div class="col col-sm-6">
                            <div class="margin-bottom">
                                Symbol time factor
                                <input type="text" id="symbol-time-factor" value="6" />
                            </div>
                            <div class="margin-bottom">
                                Notify time resolution
                                <input type="number" id="notify-time-resolution" value="16" />
                            </div>
                            <div class="margin-bottom">
                                <input type="checkbox" id="loopback-active" checked="checked" />
                                Loopback
                            </div>
                            <div class="margin-bottom">
                                <input type="checkbox" id="white-noise-active" checked="checked" />
                                White noise
                            </div>
                            <div class="margin-bottom">
                                <input type="checkbox" id="power-info-active" checked="checked" />
                                Power info
                            </div>
                            <div class="margin-bottom">
                                <input type="checkbox" id="power-chart-active" checked="checked" />
                                Power chart
                            </div>
                            <div class="margin-bottom">
                                <input type="checkbox" id="web-audio-api-node-active" checked="checked" />
                                Web audio api node
                            </div>
                            <div class="margin-bottom">
                                <input type="checkbox" id="debug-symbol-history-active" />
                                Debug symbol history
                            </div>
                            <div class="margin-bottom">
                                Sub carrier size
                                <input type="number" id="sub-carrier-size" value="8" />
                            </div>
                            <div class="margin-bottom">
                                Pilot frequency
                                <input type="text" id="pilot-frequency" value="800" />
                            </div>
                            <div class="margin-bottom">
                                OFDM spacing factor
                                <input type="text" id="ofdm-spacing-factor" value="100" />
                            </div>

                            <button id="init-button" class="btn btn-default" onClick="init()">Init</button>
                            <button class="btn btn-default" onClick="window.location.reload();">Reload</button>
                        </div>
                    </div>

                </div>
            </div>

            <h2>Blabla</h2>
            <div class="row margin-bottom">
                <div class="col col-xs-12">

                    <div class="row margin-bottom">
                        <div class="col col-sm-3">
                            <b class="label">
                                Benchmark
                            </b>
                        </div>
                        <div class="col col-sm-6">
                            <button class="btn btn-default" onClick="benchmark()">Run</button>
                        </div>
                    </div>

                    <div class="row margin-bottom">
                        <div class="col col-sm-3">
                            <b class="label">
                                Send value
                            </b>
                        </div>
                        <div class="col col-sm-6">
                            <input type="text" id="value-to-send" value="0x61" />
                            <button class="btn btn-default" onClick="send(parseInt(document.getElementById('value-to-send').value))">Send</button>
                        </div>
                    </div>

                    <div class="row margin-bottom">
                        <div class="col col-sm-3">
                            <b class="label">
                                Send text
                            </b>
                        </div>
                        <div class="col col-sm-6">
                            <input type="text" id="text-to-send" value="audio network" />
                            <button class="btn btn-default" onClick="sendText(document.getElementById('text-to-send').value)">Send text</button>
                        </div>
                    </div>

                    <div class="row margin-bottom">
                        <div class="col col-sm-3">
                            <b class="label">
                                Keyboard input
                            </b>
                        </div>
                        <div class="col col-sm-6">
                            <textarea id="keyboard-event-grabber"></textarea>
                        </div>
                    </div>

                    <div class="row margin-bottom">
                        <div class="col col-sm-3">
                            <b class="label">
                                Power
                            </b>
                        </div>
                        <div class="col col-sm-6" style="font-family: monospace;">
                            <span id="power-decibel-pilot"></span>
                            <span id="power-decibel-0"></span>
                            <span id="power-decibel-1"></span>
                            <span id="power-decibel-2"></span>
                            <span id="power-decibel-3"></span>
                            <span id="power-decibel-4"></span>
                            <span id="power-decibel-5"></span>
                            <span id="power-decibel-6"></span>
                            <span id="power-decibel-7"></span>
                        </div>
                    </div>

                    <div class="row margin-bottom">
                        <div class="col col-sm-3">
                            <b class="label">
                                Received data
                            </b>
                        </div>
                        <div class="col col-sm-6">
                            <div id="symbol" style="font-family: monospace;"></div>
                        </div>
                    </div>

                    <div id="power-chart-pilot" style="margin-bottom: 20px; border: 1px solid lightgray;"></div>
                    <div id="power-chart-0" style="margin-bottom: 20px; border: 1px solid lightgray;"></div>
                    <div id="power-chart-1" style="margin-bottom: 20px; border: 1px solid lightgray;"></div>
                    <div id="power-chart-2" style="margin-bottom: 20px; border: 1px solid lightgray;"></div>
                    <div id="power-chart-3" style="margin-bottom: 20px; border: 1px solid lightgray;"></div>
                    <div id="power-chart-4" style="margin-bottom: 20px; border: 1px solid lightgray;"></div>
                    <div id="power-chart-5" style="margin-bottom: 20px; border: 1px solid lightgray;"></div>
                    <div id="power-chart-6" style="margin-bottom: 20px; border: 1px solid lightgray;"></div>
                    <div id="power-chart-7" style="margin-bottom: 20px; border: 1px solid lightgray;"></div>


                </div>
            </div>

        </div>

        <footer>
            <div class="row">
                <div class="col col-xs-12">
                    <div class="copyright">Robert Rypuła 2015-2018</div>
                </div>
            </div>
        </footer>

    </div>

    <script src="https://cdn.rypula.pl/audio-network/v1.3.2/audio-network-v1.3.2.min.js"></script>

    <script src="amplitude-modulation-transmission-full.js"></script>

    <script>
        if (isProduction()) { // TODO refactor this
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

            ga('create', 'UA-76662342-1', 'auto');
            ga('send', 'pageview');
        }
    </script>

</body>
</html>
